<template>
    <div v-cloak>
        <el-row type="flex" style="margin-top:3%">
            <el-col :span="4">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="9">
                <el-form ref="form" :model="form" :rules="formRules" label-width="110px"  label-position="left">
    
                    <el-form-item label="专题名称" prop="title">
                        <el-input v-model.trim="form.title" placeholder="请输入专题名称，（建议14字以内，不超过30个字）" minlength="14" maxlength="30">
                            <template slot="append">{{getInputLength(form.title)}}/30</template>
                        </el-input>
                    </el-form-item>
                    <br>
                    <el-row type="flex">
                    <el-form-item label="内容分类">
                        <el-select multiple clearable v-model="form.contentClassifies" placeholder="请选择">
                            <el-option v-for="item in classifies" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="兴趣标签">
                        <el-form-item prop="tagIds">
                            <el-select multiple v-model="form.tagIds" placeholder="请选择">
                                <el-option v-for="item in Tags" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form-item>
                    </el-row>
                    <el-form-item label="封面图" prop="cover">
                        <el-upload action="" ref="upload" :http-request="uploadSectionFile" :show-file-list="false" list-type="picture" style="width:120px;float:left">
                            <el-button>选择图片</el-button>
                        </el-upload>
                        <span class="upload_span">756*1056像素或16:9，支持PNG、JPEG、GIF格式，不超过5M</span>
                        <el-input type="hidden" v-model="form.cover"></el-input>
                        <div style="margin-top:10px" v-if="form.cover != null"><img :src="form.cover" height="200px" /></div>
                    </el-form-item>
                    <el-form-item label="专题描述" prop="introduction">
                        <el-input type="textarea" placeholder="最多不超过500字" v-model.trim="form.introduction" :autosize="{ minRows: 6, maxRows: 8 }" minlength="1" maxlength="500">
                        </el-input><br>
                        <span class="text" style="float: right;color: #909399;margin-right: 10px;">{{getInputLength(form.introduction)}}/500</span>
                    </el-form-item>
                     <br>
                    <el-form-item label="上线设置">
                        <el-radio-group v-model="form.state">
                            <el-radio class="radio online_set" label="Publish">立即上线</el-radio> <br/>
                            <el-radio class="radio online_set" label="quartz">定时上线</el-radio>
                            <el-date-picker v-if="form.state === 'quartz'" value-format="yyyy-MM-dd hh:mm:ss" v-model="form.quartzDt" type="datetime" placeholder="选择日期时间">
                            </el-date-picker>
                            <br/>
                            <el-radio class="radio online_set" label="Draft">存为草稿</el-radio>
                        </el-radio-group>
                    </el-form-item>
                     <br>
                    <el-form-item>
                        <div>
                            <el-button @click="onSubmit" class="form_button">提交</el-button>
                            <el-button @click="back" class="form_button">取消</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="11"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
    </div>
</template>

<script>
    　
    import { uploadImg } from '@/api/common/upload'
    import { getDetail} from '@/api/sys/detail'
    import　{ getAllClassifies } from '@/api/sys/classify'
    import { getChildTags} from '@/api/sys/tag'
    import { insertTopic,updateTopic,getTopicById } from '@/api/topic/topic'
    export default {
        data() {
            return {
                periods: [],
                classifies:[],
                Tags:[],
                imgData: {
                    accept: 'image/gif, image/png, image/jpeg',
                },
                form: {
                    id: undefined,
                    title: undefined,
                    classifies:[],
                    tagIds:[],
                    introduction:undefined,
                    state: 'Publish',
                    publishDt: undefined
                },
                formRules:{
                    title: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ],
                    cover:[
                        { required: true, message: '封面图必须上传', trigger: 'change' }
                    ],
                    introduction:[
                        { required: true, message: '专题描述不能为空', trigger: 'blur' }
                    ]
              
                }
            }
        },
        created() {
            this.getReaderTags()
            this.getReaderClassify()
            const id = this.$route.query.id
            if(id !== undefined){
                this.getEditTpoic(id)
            }
        },
        methods: {
            getEditTpoic(id) {
                // getMagazineById(id).then(response => {
                //     if (response.code === 0) {
                //         this.form = response.data
                //         if (this.form.state === 'quartz') {
                //             this.form.quartzDt = this.form.publishDt
                //         }
                //     }
                // })
            },
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (this.form.state === 'quartz') {
                            this.form.publishDt = this.form.quartzDt
                        }
                        if (this.form.id === undefined || this.form.id === '') {
                            insertTopic(this.form).then(response => {
                                if (response.code === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: response.msg
                                    })
                                    this.back()
                                }
                            })
                        } else {
                            updateTopic(this.form).then(response => {
                                if (response.code === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: response.msg
                                    })
                                    this.back()
                                }
                            })
                        }
    
                    }
                });
            },
            uploadSectionFile(content) {
                let _this = this
                let file = content.file
                const type = file.type;
                if (this.imgData.accept.indexOf(type) == -1) {
                    _this.MessageBox("error", "图片格式不正确")
                    return
                }
                const size = file.sizes
                if (size > 5242880) {
                    _this.MessageBox("error", "图片不能大于５M")
                    return
                }
    
                let reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = function(theFile) {
                    let img = new Image()
                    img.src = theFile.target.result
                    img.onload = function() {
                        if ((img.width === 756 && img.height === 1056)　 || img.width * 9 === img.height * 16) {
                            let data = new FormData()
                            data.append("file", file)
                            uploadImg(data).then((response) => {
                                if (response.code === 0) {
                                    _this.form.cover = response.data
                                } else {
                                    _this.$message({
                                        type: 'error',
                                        message: response.msg
                                    })
                                }
                            })
                        } else {
                            _this.$message({
                                type: "error",
                                message: "图片像素不正确"
                            })
                            
                        }
                    }
                }
            },
            getReaderTags(){
                getChildTags().then(response =>{
                    if(response.code === 0){
                        this.Tags = response.data
                    }
                })
            },
            getReaderClassify(){
                getAllClassifies().then((response) => {
                    if (response.code === 0) {
                        this.classifies = response.data
                    }
                })
            },
            getInputLength(input) {
                if (input === undefined) return 0
                const length = input.length
                return length
            },
            back() {
                this.$router.back(-1)
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .go_back {
        margin: 20px;
    }
    
    .upload_span {
        margin-left: 10px;
        font-size: 16px;
        float: left;
        color: gray;
    }
    
    .free_read_column {
        font-size: 16px;
    }
    
    .el-button--text {
        font-size: 16px;
    }
    
    .online_set {
        margin: 10px;
    }
    
    .form_button {
        width: 120px;
    }
    
    .free_read .el-table__header-wrapper table {
        display: none;
    }
</style>
